@import '../../../variables';

.page-wrapper {
  //text-align: center;
}

.tab-inner {
  padding: $s;
  margin: $s;
  max-width: $component-max-width;
  position: relative;
  padding: $s * 2;
  background: #fff;
  border-radius: $card-border-radius;
  box-shadow: $shadow-card-shadow;

  @include darkTheme {
    background: $dark-theme-bg-lighter;
  }

  &.full-width {
    max-width: none;
  }

  &.no-box {
    background: transparent !important;
    box-shadow: none !important;
  }
}

.procrastination-graph {
  text-align: center;
  margin-top: $s * 2;
  margin-bottom: $s * 2;

  mat-icon {
    font-size: 120px;
    height: 120px;
    width: 120px;
    animation-name: spin;
    animation-duration: 4000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
  }

  .wrap {
    display: flex;
    justify-content: space-around;
  }

  .text-item {
    font-size: 24px;
    font-weight: 100;
    margin: $s * 2;
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg) scaleX(-1);
  }
  to {
    transform: rotate(360deg) scaleX(-1);
  }
}
